<%@ page import="com.hall.utils.UserSession" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>学术会议预约</title>
    <script src="${pageContext.request.contextPath}/static/jquery/jquerymin.js"></script>
    <link href="${pageContext.request.contextPath}/static/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui-v2.6.8/layui/layui.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap-min.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/vue/js/axios.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/live_meeting.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/case_show.css">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/provinces.js"></script>
    <style>
        body {
            background: #F5F5F5;
            height: 115%;
        }

        #navbar-default {
            background-color: #66BB66;
        }

        select {
            width: 130px;
            height: 37px;
            text-align: center;
            text-align-last: center;
        }


        #tit {
            display: block;
            width: 400px;
            height: 20px;
            margin: 100px auto;
            text-align: center;
        }

        #info {
            margin: 0 auto;
            width: 300px;
            height: 200px;
            overflow: auto;
            border-top: 1px solid #ccc;
            padding-top: 10px;
            font-size: 14px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-weight: 400;
        }

        #cb {
            text-align: left;
            width: 300px;
            margin: 10px 5%;
        }

        #cb a {
            color: red;
            display: inline-block;
        }


        #btn {
            display: block;
            margin: 0px 50px 10px 0px;
        }


        .shadow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            background: rgba(0, 0, 0, .3);
            transition: all .3s;
            z-index: -1;
        }

        .shadow.show {
            z-index: 1;
            opacity: 1;
        }

        .shadow.show .model {
            transform: translate(-50%, -50%);
        }

        .model {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -60%);
            width: 300px;
            background: #fff;
            border-radius: 6px;
            transition: all .3s;
        }

        .model .tit {
            display: flex;
            line-height: 20px;
            padding: 8px;
            margin-left: 27%;
        }

        .model .tit .close {
            margin-left: auto;
            cursor: pointer;
        }

        .model .content {
            padding: 10px;

        }

        .main1 {
            min-height: 103%;
            margin-bottom: 50px;
        }

        .form-group {
            width: 90%;
            margin-left: 5%;
            margin-right: 5%;
        }

        select {
            width: 32%;
            margin-right: 0.6%;
            border: 1px solid #E0DEDE;
            border-radius: 4px;
        }

        #address {
            margin-top: 5px;
        }

        img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            margin-bottom: 0;
            z-index: 50;
        }

        .meun-1 {
            width: 90%;
            height: 75px;
            background-color: white;
            margin: 0 5%;
            border-radius: 0 0 10px 10px;
            opacity: 0.8;
            margin-bottom: 5px;
            box-shadow: #CBF7E0 0 2px 5px 2px;
            padding-top: 3px;
            position: relative;
        }

        .ico-span {
            position: absolute;
            top: 50px;
        }

        .ico-span:nth-of-type(1) {
            position: absolute;
            left: 34.5%;
        }

        .ico-span:nth-of-type(2) {
            position: absolute;

        }

        .ico-span:nth-of-type(3) {
            position: absolute;

        }

        .rg {
            text-align: right;
            margin-right: 5%;
        }

        .meun-1 img {
            margin: auto;
            position: relative;
            left: 35%;
        }

        .ico-div span {
            margin: 0 13.6%;
        }

        .i-1 {
            position: relative;
            float: left;
            width: 33.3%;
        }
    </style>
</head>
<body>
<div id="header">
    <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
         style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;border: 0;display: none">
        <div class="row">
            <div class="container-fluid" id="fluid">
                <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                    <a class="navbar-brand" href="javascript:history.back(-1)"
                       style="padding-left: 3px;">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <div class="main1">
        <div class="container">

            <div class="row clearfix">
                <img src="${pageContext.request.contextPath}/resource/images/xueshuhuiyi.jpg" alt="">
            </div>

        </div>

        <div class="meun-1">
            <div class="i-1"><img src="${pageContext.request.contextPath}/resource/images/ico-1.png" onclick="result(0)"
                                  alt=""
                                  style="width: 50px;height: 50px">
                <span id="ico-1" onclick="result(0)" class="ico-span">会议预告</span>
            </div>
            <div class="i-1"><img src="${pageContext.request.contextPath}/resource/images/ico-2.png" onclick="result(1)"
                                  alt=""
                                  style="width: 50px;height: 50px">
                <span id="ico-2" onclick="result(1)" class="ico-span">结果查询</span>
            </div>
            <div class="i-1"><img src="${pageContext.request.contextPath}/resource/images/ico-3.png" onclick="result(2)"
                                  alt=""
                                  style="width: 50px;height: 50px">
                <span id="ico-3" onclick="result(2)" class="ico-span">个人中心</span>
            </div>


        </div>

        <form>
            <div class="form-group">
                <label>预约学术会议名称</label>
                <input type="text" id="useId" class="form-control">
            </div>

            <div class="form-group">
                <label>预约者姓名(或所属医院)</label>
                <input type="text" id="name" class="form-control">
            </div>

            <div class="form-group">
                <label>预约人联系电话</label>
                <input type="tel" v-model="phone" oninput="input()" maxlength="11"
                       id="tell" class="form-control">
            </div>

            <div class="form-group" id="locale">
                <label>举办地点</label><br>
                <select id="province" name="">
                    <option value="">请选择省</option>
                </select>
                <select id="city" name="">
                    <option value="">请选择市</option>
                </select>
                <select id="area" name="" style="margin-right: 0">
                    <option value="">请选择县</option>
                </select>
                <input type="text" name="detail" id="address" class="form-control"
                       placeholder="输入举办会议的详细地址（酒店名称、医院名称）...">
            </div>

            <div style="margin-left: 5%;margin-bottom: 10px">
                <label for="up">参会方式(可多选)</label><br>
                <input type="checkbox" name="choice" value="1" width="70px;" id="up"/>
                <label for="down">线上</label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox" name="choice" value="2" width="30px;" id="down"/>
                <label>线下</label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:allCheck('choice',true)">全选</a>
                <a href="javascript:allCheck('choice',false)">全不选</a>
            </div>


            <div class="form-group">
                <label>会议开始时间</label>
                <div class="layui-form-item">
                    <input type="d" class="layui-input" id="startTime" placeholder="--:--">
                </div>


                <label>会议结束时间</label>
                <div class="layui-form-item">
                    <input type="" class="layui-input" id="endTime" placeholder="--:--">
                </div>

            </div>

            <div class="layui-form-item layui-form-text form-group">
                <label>情况说明</label>
                <img id="tips" style="width: 15px;margin-bottom: 6px ;"
                     src="${pageContext.request.contextPath}/resource/images/yiwen.png" alt=""
                     onclick="tipss()">
                <div class="layui-input-block" style="width: 100%;margin-left: 0">
                <textarea placeholder="请大致描述需要几个会场、参会人数、讲者人数等等......"
                          class="layui-textarea" name="desc" id="show"></textarea>
                </div>
            </div>
            <h6 class="rg">人工客服号码：400-610-9777</h6>
            <div class="form-group">
                <input type="button" class="form-control" onclick="updatelearning()"
                       style="background-color: #f0f0f4;border: none"
                       value="提交" id="accept" disabled="true">
            </div>


            <p id="cb"><input type="checkbox" id="chec" onclick="if (this.checked) {enable()} else {disable()}">
                我已阅读并同意该<a href="void:;" target="_self" id="btn">协议</a></p>
        </form>
    </div>

</div>
</body>

<script>
    $(document).ready(function () {


    })
    <%--    手机号验证--%>
    let c;

    function input() {
        let phone = /^([0-9]+\.?[0-9]*|-[0-9]+\.?[0-9]*)$/;
        if (!phone.test($("#tell").val()) && c.length != 1) {
            $("#tell").val(c);
        } else {
            c = $("#tell").val()
        }
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
    });


    // axios表单申请
    function updatelearning() {
        let obj = document.getElementsByName('choice'); //选择所有name="'test'"的对象，返回数组
        //取到对象数组后，我们来循环检测它是不是被选中
        let s = '';
        for (let i = 0; i < obj.length; i++) {
            if (obj[i].checked) s += obj[i].value; //如果选中，将value添加到变量s中
        }
        //那么现在来检测s的值就知道选中的复选框的值了
        let way = '';
        if (s == '1') {
            way = "线上"
        } else if (s == '2') {
            way = "线下"
        } else {
            way = "线上+线下"
        }


        //验证方法


        if ($('#useId').val() == '' || $('#useId').val() == null) {
            //失败提示
            layer.msg('预约学术会议名称未填写');
            return false;
        }
        if ($('#name').val() == '' || $('#name').val() == null) {
            //失败提示
            layer.msg('预约者姓名未填写');
            return false;
        }
        if ($('#tell').val() == '' || $('#tell').val() == null) {
            //失败提示
            layer.msg('联系电话未填写');
            return false;
        }
        if ($('#province').val() == '' || $('#province').val() == null
            || $('#city').val() == '' || $('#city').val() == null
            || $('#area').val() == '' || $('#area').val() == null
            || $('#address').val() == '' || $('#address').val() == null
        ) {
            //失败提示
            layer.msg('地址未填写');
            return false;
        }
        if ($('#startTime').val() == '' || $('#startTime').val() == null) {
            //失败提示
            layer.msg('会议开始时间未填写');
            return false;
        }
        if ($('#endTime').val() == '' || $('#endTime').val() == null) {
            //失败提示
            layer.msg('会议结束时间未填写');
            return false;
        }

        //表单申请
        let form = new FormData();
        form.append("useId", $("#useId").val());
        form.append("name", $("#name").val());
        form.append("locale", $('#province option:selected').val() + "," + $('#city option:selected').val() + "," + $('#area option:selected').val() + "," + $('#address').val());
        form.append("way", way);
        form.append("startTime", $("#startTime").val());
        form.append("endTime", $("#endTime").val());
        form.append("tell", $("#tell").val());
        form.append("represent", $("#show").val());

        axios({
            method: 'post',
            url: "${pageContext.request.contextPath}/learning/toaddmeet",
            data: form
        })
            .then(function (r) {
                if (r.data == "ok") {
                    layer.msg('申请已提交，请等待管理员处理。您可以点击查询结果，查询处理进展！！！', {offset: '300px'}, {time:7000},function () {
                        messageWx();
                        window.location.href = "${pageContext.request.contextPath}/learning/updatameet";
                    });
                } else {
                    alert("修改失败");
                }
            });
    }


    //异步请求微信推送
    function messageWx() {
        axios({
            url: '${pageContext.request.contextPath}/learning/text/{uid}',
            method: 'post',
        }).then(function (r) {
        }).finally(() => {

        }).catch(() => {

        })
    }


    //协议弹窗
    let btn = document.getElementById('btn');
    let shadow = document.getElementById('shadow');
    btn.addEventListener('click', function (e) {
        layer.alert('①议程、人员的修改时间为发出申请24小时内②会议举办时间至少为申请时间3天以后。'
            , {
                skin: 'layui-layer-molv',//样式类名
                title: '群爱学术会议协议'
                , closeBtn: 0
            });
    }, false)

    //同意协议按钮前得框
    function disable() {
        document.getElementById("accept").disabled = true
        $("#accept").css("background-color", "#f0f0f4")
    }

    function enable() {
        document.getElementById("accept").disabled = false
        $("#accept").css("background-color", "#a4e2c6")
        layer.alert('①议程、人员的修改时间为发出申请24小时内②会议举办时间至少为申请时间3天以后。'
            , {
                skin: 'layui-layer-molv',//样式类名
                title: '群爱学术会议协议'
                , closeBtn: 0
            });
    }

    //全选和全不选（第一个参数为复选框名称，第二个参数为是全选还是全不选）
    function allCheck(name, boolValue) {
        // debugger;
        var allvalue = document.getElementsByName(name);
        for (var i = 0; i < allvalue.length; i++) {
            if (allvalue[i].type == "checkbox")
                allvalue[i].checked = boolValue;
        }
    }

    //拼成字符串方便传递到后端控制层处理
    function toMyString(name) {
        var myvalue = document.getElementsByName(name);
        var myName = "";
        for (var i = 0; i < myvalue.length; i++) {
            if (myvalue[i].checked) {
                myName += myvalue[i].value + ",";
            }
        }
    }

    function result(index) {
        switch (index) {
            case 0:
                window.location.href = "${pageContext.request.contextPath}/learning/meet";
                break;
            case 1:
                window.location.href = "${pageContext.request.contextPath}/learning/selectmeet";
                break;
            case 2:
                layer.msg('敬请期待');
                break;
        }
    }


    /**
     * 开始时间，结束时间
     */

    layui.use('laydate', function () {
        var laydate = layui.laydate;


        //日期时间选择器
        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#endTime'
            , type: 'datetime'
        });

        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            , position: 'static'
        });
        laydate.render({
            elem: '#test-n2'
            , position: 'static'
            , lang: 'en'
        });
        laydate.render({
            elem: '#test-n3'
            , type: 'month'
            , position: 'static'
        });
        laydate.render({
            elem: '#test-n4'
            , type: 'time'
            , position: 'static'
        });
    });


    //?点击时的tip
    function tipss() {
        layer.tips('例如：本次会议需要1个主会场和3个分会场，线上专家居多，线下大概会有15位专家参加...', '#tips', {
            tips: [1, '#55C9B9'],
            time: 5000,
        });
    }

</script>
</html>